<template>
	<view class="container">
		<view class="address">
		  <view @click="goAddress()" class="cell">
			  <view class="information">
			  				  <view v-if="address" class="location">{{address.location}}</view>
			  				  <view v-else class="location">服务地址</view>
			  				  <view v-if="address" class="user">
			  					  <text>{{address.name}}</text>
			  					  <text>{{address.phone}}</text>
			  				  </view>
			  </view>
			  <image style="width: 40rpx;height: 40rpx;" src="../../static/feed/right.png"></image>
		  </view>
		  <view class="dliver"></view>
		</view>
		<view class="detail">
			<view class="pet">
				<view class="title">服务宠物</view>
				<view style="color: #b0b0b2;font-size: 30rpx;letter-spacing: 0.1em;margin-bottom: 20rpx;">限2只小型宠/一只中型宠/一只大型宠，如超出数量将增加相应费用</view>
				<scroll-view scroll-x="true">
					<view class="grid">
						<view class="grid-item" v-for="(item,index) in petList" :key="index">
							<image @click="deletepet(index)" style="width: 40rpx;height: 40rpx;position: absolute;top:-5rpx;right: 5rpx;" src="../../static/feed/delete.png"></image>
							<image :src="item.pet_avatur"></image>
							<view class="name">{{item.pet_name}}</view>
						</view>
						<view @click="goChoosepet()" class="grid-item">
							<image src="../../static/user/add.png"></image>
							<view style="color: #9c9c9c;" class="name">添加宠物</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view>
			<view @click="openDate()"><Cell title="服务日期" :content="riqi===''?'请选择服务日期':riqi"></Cell></view>
			<view class="detail">
				<view class="title">
					遛狗频率
				</view>
				<view style="display: flex;flex-wrap: wrap;">
					<view @click="selectpinlv(index)" :class="['choose',item.selected?'active':'']" v-for="(item,index) in pinlv" :key="index">
						{{item.name}}(￥{{item.price}})
					</view>
				</view>
			</view>
			<view class="detail">
				<view class="title">
					遛狗时间
				</view>
				<view style="display: flex;flex-wrap: wrap;">
					<view @click="selectliutime(index)" style="margin-bottom: 10rpx;" :class="['choose',item.selected?'active':'']" v-for="(item,index) in liutime" :key="index">
						{{item.name}}
					</view>
				</view>
			</view>
			<view @click="goChoosepeople()"><Cell title="服务人员" :content="people?people.name:'请选择服务人员'"></Cell></view>
			<view @click="goBeizhu()"><Cell title="服务备注" :content="beizhu===''?'选填':beizhu"></Cell></view>
		</view>
		<view class="pay">
			<view class="title">选择支付方式</view>
			<view class='pay-item'>
				<view class="left">
					<image style="width: 50rpx;height: 50rpx;margin-right: 10rpx;" src="../../static/home/cat.png"></image>
					<view style="font-size: 28rpx;letter-spacing: 0.1em;">宠家支付</view>
				</view>
				<view class="right">
					<radio color="#f4e088" activeBackgroundColor="#0b0801" :checked="true"></radio>
				</view>
			</view>
		</view>
		<Mustknow @changeread="readchange"></Mustknow>
		<view class="bottom">
			<view class="left">
				合计：<text style="color:#cc6278;margin-right: 20rpx;">￥{{sum}}</text><text @click="priceshow()" style="color:#cc6278;">价格明细</text>
			</view>
			<view @click="pay()" class="button">
				去支付
			</view>
		</view>
		<uni-popup @maskClick="guanbi" ref="datepop" background-color="#ffffff">
			<view style="width: 500rpx;padding: 40rpx;box-sizing: border-box;">
				<view style="margin-bottom: 20rpx;font-weight: 500;">选择您的服务时间</view>
				<uni-datetime-picker @change="timelistchange" style="margin-bottom: 10rpx;" :start="Date.now()+24*60*60*1000" type="date" :clear-icon="false" v-model="riqi"  />
				<view style="width: 100%;display: flex;align-items: center;justify-content: center;">
					<view @click="quren()" class="button">确认</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup :mask-click="false" type="bottom" ref="pricepop" borderRadius="20rpx 20rpx 0 0;" background-color="#ffffff">
			<view style="width: 100%;padding: 20rpx;box-sizing: border-box;height: 800rpx; ">
				<view style="width: 100%;display: flex;align-items: center;justify-content: flex-end;margin-bottom: 10rpx;">
					<uni-icons @click="priceclose()" type="closeempty" size="20" color="#969696">
					</uni-icons>
				</view>
				<view class="order">
					<view v-if="choosepinlv!==-1" class="order-item">
						<view class="label">
							{{pinlv[choosepinlv].name}}
						</view>
						<view class="miaoshu">
							￥{{pinlv[choosepinlv].price}}
						</view>
					</view>
					<view v-if="chaochu!==0" class="order-item">
						<view class="label">
							每超过1只大型宠中型宠或2只小型宠
						</view>
						<view class="miaoshu">
							+￥{{chaochu*80}}
						</view>
					</view>
					<view class="order-item">
						<view class="label">
							预定天数
						</view>
						<view class="miaoshu">
							×1
						</view>
					</view>
					<view class="order-item">
						<view style="font-size: 32rpx;color: #000;" class="label">
							合计:
						</view>
						<view style="font-size: 32rpx;color: #000;" class="miaoshu">
							￥{{sum}}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive,onMounted,onBeforeMount,computed} from "vue"
	import Cell from "@/pages/feed/components/cell.vue"
	import http from "@/utils/request.js"
	import Mustknow from "@/pages/feed/components/mustknow.vue"
	let chaochu=computed(()=>{
		let wocao=0
		petList.value.forEach(item=>{
			if(item.weight===0)wocao+=1
			else wocao+=2
		})
		if(wocao>2)return (wocao-2)
		else return 0;
	})
	let sum=computed(()=>{
		if(choosepinlv.value===-1)return 0;
		else return chaochu.value*80+pinlv[choosepinlv.value].price
	})
	onBeforeMount(()=>{
		let addresslist=uni.getStorageSync('addresslist')
		addresslist.forEach(item=>{
			if(item.isdefault===1){
				return address.value=item
			}
		})
	})
	onMounted(()=>{
		uni.$on('receiveaddress',(e)=>{
			console.log(e)
			address.value=e
		})
		uni.$on('receivepeople',(e)=>{
			console.log(e)
			people.value=e
		})
		uni.$on('receivepet',(e)=>{
			console.log(e)
			let flag=false;
			petList.value.forEach((item)=>{
				if(item.pet_id===e.pet_id)flag=true;
			})
			if(!flag){
				petList.value.push(e)
			}
		})
		uni.$on('receivebeizhu', (e) => {  
		    console.log(e);
			  beizhu.value=e
		  });
		return ()=>{
			uni.$off('receivepet')
			uni.$off('receivepeople')
			uni.$off('receiveaddress')
			uni.$off('receivebeizhu')
		}
	})
	
	let people=ref(null)
	let price=ref(0)
	let riqi=ref('')
	let address=ref(null)
	let choosepinlv=ref(-1)
	let beizhu=ref('')
	let liutime=reactive([
		{
			name:'8:00-10:00',
			selected:false
		},
		{
			name:'10:00-12:00',
			selected:false
		},
		{
			name:'12:00-14:00',
			selected:false
		},
		{
			name:'14:00-16:00',
			selected:false
		},
		{
			name:'16:00-18:00',
			selected:false
		},
		{
			name:'18:00-20:00',
			selected:false
		}
	])
	let pinlv=reactive([
		{
			name:'1天1次',
			price:80,
			selected:false
		},
		{
			name:'1天2次',
			price:160,
			selected:false
		},
		{
			name:'1天3次',
			price:240,
			selected:false
		},
	])
	let datepop=ref(null)
	let petList=ref([])
	let choosenum=ref(0)
	let isread=ref(false)
	let pricepop=ref(null)
	
	function readchange(e){
		isread.value=e
	}
	function pay(){
		if(!isread.value)return uni.showToast({
			title:'未同意协议',
			icon:'none'
		})
		if(!people.value)return uni.showToast({
			title:'未选择人员',
			icon:'none'
		})
		if(riqi.value==='')return uni.showToast({
			title:'未选择日期',
			icon:'none'
		})
		let order_pet=''
		let order_address=address.value.location+address.value.detail+';'+address.value.name+';'+address.value.phone+';'+address.value.wx
		petList.value.forEach((item)=>{
			order_pet=order_pet+item.pet_id+';'
		})
		if(order_pet==='')return uni.showToast({
			title:'未选择宠物',
			icon:'none'
		})
		if(choosepinlv.value===-1)return uni.showToast({
			title:'未选择频率',
			icon:'none'
		})
		let order_package=pinlv[choosepinlv.value].name
		liutime.forEach(item=>{
			if(item.selected){
				order_package=order_package+'('+item.name+')'
			}
		})
		let response=http.post('/order/addorder',{
			order_sum:sum.value,
			order_pet:order_pet,
			order_address:order_address,
			order_service:'2',
			order_status:1,
			order_people:people.value.people_id,
			order_package:order_package,
			create_time:Date.now(),
			start_time:riqi.value+' '+'0:00',
			end_time:riqi.value+' '+'23:59',
			order_beizhu:beizhu.value,
			order_image:petList.value[0].pet_avatur,
			order_order:uni.getStorageSync('userinfo').user_id
		})
		
		response.then(res=>{
			if(res.data.code===200){
				uni.showToast({
					title:'订单生成成功',
					duration:1000
				})
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
			}
		})
	}
	function guanbi(){
		riqi.value=''
	}
	function priceshow(){
		pricepop.value.open()
	}
	function priceclose(){
		pricepop.value.close()
	}
	function selectpinlv(index){
		if(pinlv[index].selected)return;
		pinlv.forEach((item)=>{
			item.selected=false
		})
		liutime.forEach((item)=>{
			item.selected=false
		})
		pinlv[index].selected=true
		choosepinlv.value=index
		choosenum.value=index+1
	}
	function selectliutime(index){
		if(choosenum.value===0&&!liutime[index].selected)return;
		else if(liutime[index].selected){
			liutime[index].selected=!liutime[index].selected
			choosenum.value++
		}
		else if(!liutime[index].selected){
			liutime[index].selected=!liutime[index].selected
			choosenum.value--
		}
	}
	function quren(){
		datepop.value.close()
	}
	function openDate(){
		datepop.value.open()
	}
	function deletepet(index){
		petList.value.splice(index,1)
	}
	function goBeizhu(){
		uni.navigateTo({
			url:"/pages/liu/beizhu"
		})
	}

	function goAddress(){
		uni.navigateTo({
			url:"/pages/address/list"
		})
	}
	function goChoosepet(){
		uni.navigateTo({
			url:"/pages/liu/choosepet"
		})
	}
	function goChoosepeople(){
		uni.navigateTo({
			url:"/pages/liu/choosepeople"
		})
	}
</script>

<style lang="scss">
	.container{
		.address{
			position: relative;
			
			.cell{
				width: 100%;
				height: 150rpx;
				box-sizing: border-box;
				display: flex;
				padding: 0 20rpx;
				align-items: center;
				justify-content: space-between;
				background-color: #ffffff;
				
				&:active{
					background-color: #efefef;
				}
				
				.information{
					display: flex;
					flex-direction: column;
					width: 80%;
					
					.location{
						font-size: 32rpx;
						font-weight: 500;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-bottom: 15rpx;
					}
					
					.user{
						display: flex;
						font-size: 28rpx;
						color: #8a898d;
						
						text{
							width: 40%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin-right: 10rpx;
						}
					}
				}
			}
			
			.dliver{
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				height: 10rpx;
				background: repeating-linear-gradient(-45deg, #efb9ba, #efb9ba 20%, transparent 0, transparent 25%, #fbeca7 0, #fbeca7 45%, transparent 0, transparent 50%);
				background-size: 160rpx;
				content: "";
			}
		}
		
		.detail{
			width: 100%;
			padding: 40rpx 20rpx;
			margin-bottom: 10rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			
			.title{
				font-size: 30rpx;
				font-weight: 600;
				letter-spacing: 0.1em;
				margin-bottom: 40rpx;
			}
			
			.list{
				width: 100%;
				display: flex;
				margin-bottom: 40rpx;
				
				&-item{
					width: 38%;
					height: 320rpx;
					margin-right: 30rpx;
					border:4rpx solid #ebebeb;
					border-radius: 20rpx;
					padding: 20rpx 20rpx;
					position: relative;
					
					.recommend{
						position: absolute;
						top:-35rpx;
						left: 0;
						padding: 10rpx 20rpx;
						font-size: 28rpx;
						font-weight: 600;
						background-color: #f2e283;
						border-radius: 30rpx 30rpx 30rpx 5rpx;
					}
					
					.taocantitle{
						font-size: 30rpx;
					}
					
					.price{
						color:#cc6278;
						font-size: 30rpx;
					}
					
					.include{
						color:#9b9b9b;
						font-size: 28rpx;
					}
					
					&.active{
						border-color:#f2e283;
						background-color: #fefef6;
					}
					
					.tixing{
						position: absolute;
						top: -40rpx;
						right: -50rpx;
						width: 30rpx;
						border-top: 40rpx solid #f3e283; // 梯形的高
						border-right: 40rpx solid transparent; // 往右延伸
						border-bottom: 50rpx solid transparent; // 整个div的高
						border-left: 40rpx solid transparent; // 往左延伸
						transform:rotate(-135deg)
					}
				}
			}
			
			.pet{
				.grid{
					display: flex;
					
					&-item{
						display: flex;
						position: relative;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-right: 30rpx;
						
						image{
							width: 100rpx;
							height: 100rpx;
							border-radius:50%;
							margin-bottom: 10rpx;
						}
						
						.name{
							letter-spacing: 0.1em;
							font-size: 28rpx;
						}
					}
				}
			}
		}
		
		.pay{
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			padding: 40rpx 20rpx;
			margin-bottom: 10rpx;
			background-color: #ffffff;
			
			.title{
				font-size: 30rpx;
				font-weight: 600;
				letter-spacing: 0.1em;
				margin-bottom: 40rpx;
			}
			
			&-item{
				display: flex;
				width: 100%;
				background-color:#fffef9 ;
				box-sizing: border-box;
				border-radius: 20rpx;
				padding: 40rpx 20rpx;
				height: 100rpx;
				border:2rpx solid #eee295;
				align-items: center;
				justify-content: space-between;
				
				.left{
					display: flex;
					align-items: center;
				}
			}
		}
		
		.bottom{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			box-shadow: 0 -12rpx 64rpx -14rpx rgba(0, 0, 0, 0.15);
			background-color: #ffffff;
			border-radius:20rpx 20rpx 0 0 ;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.button{
				background-color: #f8e177;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #090300;
				letter-spacing: 0.2em;
				width: 40%;
				height: 70%;
				border-radius: 50rpx;
				
				&:active{
					opacity: 0.7;
				}
			}
		}
		.button{
			background-color: #f8e177;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #090300;
			letter-spacing: 0.2em;
			width: 90%;
			height: 70rpx;
			border-radius: 50rpx;
			
			&:active{
				opacity: 0.7;
			}
		}
	}
	
	.choose{
		display: flex;
		align-items: center;
		font-size: 23rpx;
		justify-content: center;
		margin:0 20rpx 0 0;
		width: 200rpx;
		height: 80rpx;
		color: #b1b0b8;
		letter-spacing: 0.1em;
		border: 4rpx solid #b6b4bf;
		border-radius: 20rpx;
		
		&.active{
			border: 4rpx solid #eee4a6;
			color: #eee4a6;
		}
	}
	
	.order{
		width: 100%;
		box-sizing: border-box;
		
		&-item{
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			justify-content: space-between;
			
			.label{
				font-size: 30rpx;
				color:#969696;
				letter-spacing: 0.1em;
			}
			
			.miaoshu{
				max-width: 70%;
				color:#969696;
				letter-spacing: 0.1em;
			}
		}
	}
</style>
